<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Standard Meta -->
    <meta content="text/html" charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" th:href="@{webjars/bootstrap/3.3.7/css/bootstrap.css}" />
    <script th:src="@{webjars/angularjs/1.5.7/angular.js}"></script>
    <!-- Site Properties -->
    <title></title>
</head>

<body>
    <div data-ng-app="homeApp">
        <div data-ng-controller="campaign" data-ng-init="loadCampaign()">
            <form name="campaignForm">
                <input type="hidden" data-ng-model="page" />
                <input type="hidden" data-ng-model="size" />
                <label>关键字:</label>
                <select data-ng-model="campaignName" data-ng-change="query(campaignName, page, size)">
                    <option data-ng-repeat="o in campaignNames track by $index" value="{{o.campaignName}}" data-ng-selected="$index==0">{{o.campaignName}}</option>
                </select>
                <button data-ng-click="query(campaignName, page, size)">查询</button>
            </form>
            <table border="1">
                <thead>
                    <tr>
                        <td>ID</td>
                        <td>客户名称</td>
                        <td>车牌号</td>
                        <td>保单号</td>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-hide="campaignObjects.length">
                        <td colspan="4" class="text-center">没有数据</td>
                    </tr>
                    <tr data-ng-repeat="object in campaignObjects">
                        <td>{{object.id}}</td>
                        <td>{{object.customer.customerName}}</td>
                        <td>{{object.vehicle.licenseNumber}}</td>
                        <td>{{object.vehiclePolicy.policyNo}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script>
    var app = angular.module("homeApp", []);
    app.controller("campaign", function($scope, $http) {
        $scope.page = 0;
        $scope.size = 50;
        $scope.campaignName = "";
        $scope.campaignNames = [];
        $scope.campaignObjects = [];
        $scope.query = function(campaignName, page, size) {
            $http.post("/api/campaign/vehicle/renew/query", {
                campaignName: campaignName,
                page: page,
                size: size
            }).success(function(data) {
                $scope.campaignObjects = data;
            });
        };
        $scope.loadCampaign = function() {
            $http.get("/api/campaign/queryAll").success(function(res) {
                $scope.campaignNames = res;
            });
        };
    });
    </script>
</body>

</html>
